<head>
    <title>Tree Demo</title>
    <style>
        TR {
            background-color: #FAFAFA;
        }

        body {
            background-color: white;
        }
    </style>

</head>
<script type="text/javascript">
    var slectedData;
    var mydata;
    $.ajax({
        // url: './json/useradmin/allPermission.js',
        url: layui.setter.hostAddr +'/portal/role/fullmenutree',
        beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("Authorization", layui.data('layuiAdmin').Authorization);
        },
        type: 'GET',
        dataType: "json",
        async: false,
        success: function (res) {
            mydata = res
            console.log(JSON.stringify(mydata.data))
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            //通常情况下textStatus和errorThrown只有其中一个包含信息
            console.log(textStatus);   //调用本次ajax请求时传递的options参数
            console.log(errorThrown);   //调用本次ajax请求时传递的options参数
        }
    })


    //全局变量,树1 , 树2
    var Tree1, Tree2;


    //ztree 的设置.对于标准格式数据.不需要设置我注释的那部分.
    //那部分属于简单格式数据需要设置的...不清楚去看ztree demo
    var setting = {
        checkable: true,
        nameCol: "title",
        nodesCol: "list"

        //isSimpleData: true,
        //treeNodeKey: "id",
        //treeNodeParentKey: "pId",
        //showLine: true,
        //root:{
        //	isRoot:true,
        //	nodes:[]
        //},
    };

    //数据右移动


    function addRole() {
        //移动方法
        //右移时Tree1 在第一个参数,Tree2第二个参数
        //表示Tree1移动致Tree2
        moveTreeNode(Tree1, Tree2);

    }

    //数据左移动


    function delRole() {
        //移动方法 参数相反
        moveTreeNode(Tree2, Tree1);
    }

    function moveTreeNode(zTree1, zTree2) {
        var nodes = zTree1.getCheckedNodes();	//获取选中需要移动的数据
        for (var i = 0; i < nodes.length; i++) {	//把选中的数据从根开始一条一条往右添加
            var node = nodes[i];
            console.log("移动=============" + node.gnmkId)
            var strs = {};			//新建一个JSON 格式数据,表示为一个节点,可以是根也可以是叶
            strs.gnmkId = node.gnmkId;
            strs.title = node.title;
            strs.code = node.code;
            strs.list = new Array();	//树节点里面有个 nodes 集合,用来存储父子之间的包涵关系

            //调用添加方法
            //strs : json 格式..拼装成树的一个节点
            //zTree2: 表示需要添加节点的树
            zTreeDataAddNode(strs, zTree2);

            //获取这个被添加的code 如果是右增加  用来把它从左边移除掉
            var scode = strs.code;
            scode = scode.substring(0, scode.lastIndexOf("-"));

            //使用递归移除 移除的时候从叶子开始找  和增加的时候刚好相反
            //参数1就是数组最后一个数据
            //scode  : 上面截取的code 表示父亲节点
            //zTree1 : 需要移除的树,在zTree1 里面移除此对象
            zTreeDataDelete(nodes[nodes.length - (i + 1)], scode, zTree1);
        }
        //把选中状态改为未选择
        zTree2.checkAllNodes(false);
        zTree1.checkAllNodes(false);

        //刷新
        zTree2.refresh();
        zTree1.refresh();
    }

    //树数据移动方法
    function zTreeDataAddNode(strs, zTree2) {
        var nodes = zTree2.transformToArray(zTree2.getNodes());	//获取需要添加数据的树下面所有节点数据
        //如果有多个数据需要遍历,找到strs 属于那个父亲节点下面的元素.然后把自己添加进去
        if (nodes.length > 0) {
            //这个循环判断是否已经存在,true表示不存在可以添加,false存在不能添加
            var isadd = true;
            for (var j = 0; j < nodes.length; j++) {
                if (strs.code == nodes[j].code) {
                    isadd = false;
                    break;
                }
            }
            //找到父亲节点
            var scode = strs.code;
            scode = scode.substring(0, scode.lastIndexOf("-"));
            var i = 0;
            var flag = false;
            for (i; i < nodes.length; i++) {
                if (scode == nodes[i].code) {
                    flag = true;
                    break;
                }
            }
            //同时满足两个条件就加进去,就是加到父亲节点下面去
            if (flag && isadd) {
                var treeNode1 = nodes[i];

                treeNode1.list[treeNode1.list.length <= 0 ? 0 : treeNode1.list.length++] = strs;

                //如果zTree2 里面找不到,也找不到父亲节点.就把自己作为一个根add进去
            } else if (isadd) {
                zTree2.addNodes(null, strs);
            }
        } else {
            //树没任何数据时,第一个被加进来的元素
            zTree2.addNodes(null, strs);
        }
    }

    //数据移除
    function zTreeDataDelete(node, scode, zTree1) {
        if (node.isParent) {	//判断是不是一个根节点,如果是一个根几点从叶子开始遍历寻找

            //如果是个根就检测nodes里面是否有数据
            if (node.list.length > 0) {
                //取出来
                var fnodes = node.list;
                for (var x = 0; x < fnodes.length; x++) {
                    //不是根节点.并且code 相当就是需要移除的元素
                    if (!(fnodes[x].isParent) && fnodes[x].code == scode) {
                        //调用ztree 的移除方法,参数是一个节点json格式数据
                        zTree1.removeNode(fnodes[x]);

                        //如果当前这个节点又是个根节点.开始递归
                    } else if (fnodes[x].isParent) {
                        zTreeDataDelete(fnodes[x], scode);
                    }
                }
            } else {
                //如果是个根,但是下面的元素没有了.就把这个根移除掉
                zTree1.removeNode(node);
            }
        } else {
            //不是就直接移除
            zTree1.removeNode(node);
        }
    }

    //构造数据结构
    let idLis = []

    function dataTreeBuild(nodesArr) {
        let dataArr = []

        if (nodesArr.length > 0) {
            for (let i = 0; i < nodesArr.length; i++) {

                let item = nodesArr[i];
                if (item.gnmkId) {
                    idLis.push(item.gnmkId)
                }
                dataArr.push({
                    gnmkId: item.gnmkId,
                    code: item.code,
                    title: item.title,
                    // list: dataTreeBuild(item.list),
                    list: item.list ? dataTreeBuild(item.list) : ''
                    // privilegeUrl: "",
                    // systemModuleID: 12
                })
            }
        }
        return dataArr
    }

    // 获取当前左侧权限框数据
    function getLeftNodes() {
        let nodesArr = Tree1.getNodes();
        let leftData = dataTreeBuild(nodesArr)
        var leftId = idLis
        idLis = []
        layui.sessionData('layuiAdmin', {
            key: "addLeftPermissonData"
            , value: leftId.join(',')
        });
        // console.log(JSON.stringify(retData))
    }

    // 获取当前右侧权限框数据
    function getRightNodes() {
        let nodesArr = Tree2.getNodes();
        let rightData = dataTreeBuild(nodesArr)
        var rightId = idLis
        idLis = []
        layui.sessionData('layuiAdmin', {
            key: "addRightPermissonData"
            , value: rightId.join(',')
        });
        // console.log(JSON.stringify(retData))
    }

    function allData() {
        getLeftNodes()
        getRightNodes()
    }


    //zTree说明:
    //这里没有样式之类的东西,需要看到还需要引人几个css 和 imp 之类的东西.
    //可以去看zTree的demo 和 API

    //初始化方法
    $(document).ready(function () {
        // var $2 = $.noConflict(); // 第二个加载的jQuery对象变成了 $2
        // var version = $.fn.jquery;
        // var version2 = $2.fn.jquery;
        //树1 数据 生成
        Tree1 = $("#srcTree").zTree(setting, mydata.data);
        //树2 数据null

        Tree2 = $("#tarTree").zTree(setting, null);
    });
</script>


<div class="layui-form" lay-filter="layuiadmin-form-role" style="padding: 20px 30px 0 0;">
    <div class="layui-form-item">
        <label class="layui-form-label">角色名称</label>
        <div class="layui-input-inline">
            <script type="text/html" template>
                <input type="text" name="roleName" value="{{ d.params.rolename || '' }}" lay-verify="required|isExist"
                       placeholder="请输入角色名称" autocomplete="off" class="layui-input">
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">权限范围</label>
        <div style="">
            <div style="float: left;width: 300px;height:400px;border:1px solid lightgrey;" id="td_tree1">
                <ul id="srcTree" class="tree" style="width:100%; overflow:auto;"></ul>
            </div>
            <div style="float: left;width: 300px;height:400px;border:1px solid lightgrey;">
                <div style="margin-top: 50%; text-align: center">
                    <button id="btnadd" onclick="addRole() " type="button" class="layui-btn layui-btn-sm mybtn">
                        <i class="layui-icon">&#xe602;</i>
                    </button>
                    <!--                    <button id="btnadd" onclick="addRole()">》》</button>-->
                    <br><br><br>
                    <button id="bendel" onclick="delRole() " type="button" class="layui-btn layui-btn-sm mybtn">
                        <i class="layui-icon">&#xe603;</i>
                    </button>
                </div>

                <!--                    <button id="bendel" onclick="delRole()">《《</button>-->
            </div>
            <div style="float: left;width: 300px;height:400px;border:1px solid lightgrey;">
                <ul id="tarTree" class="tree" style="width:100%; overflow:auto;"></ul>
            </div>

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述信息</label>
        <div class="layui-input-block">
            <script type="text/html" template>
                <textarea type="text" name="describe" autocomplete="off" class="layui-textarea">{{ d.params.descr || '' }}</textarea>
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="button" lay-submit lay-filter="LAY-user-role-submit" value="确认" class="layui-btn mybtn"
                   onclick="allData()">
        </div>
    </div>
</div>
<script>
    layui.use(['form'], function () {
        var form = layui.form
        form.verify({
            isExist: function (value) {
                var params = $('.layui-input-inline input[name="roleName"]').val();
                debugger
                var data;
                // $.ajax({
                //     url: 'http://172.20.10.12:8000/post/',
                //     beforeSend: function (XMLHttpRequest) {
                //         XMLHttpRequest.setRequestHeader("Authorization",layui.data('layuiAdmin', 'Authorization'));
                //     },
                //     contentType: "application/json",
                //     dataType: 'json',
                //     type: "post",
                //     async: false,
                //     data: JSON.stringify({"name": params}),
                //     success: function (result) {
                //         data = result
                //     },
                // });
                if (false) {
                    return '用户id已存在';
                }

            }

        })
    })
</script>

